<template>
	<view class="content">
		<view class="top">
			<view class="box">
				<view class="rankinglist">
					<view class="subscription-item empty-box" v-if="commissionRankinglist.length == 0">
						<u-empty mode="list"></u-empty>
					</view>
					<view class="ranking-item" v-for="(item,index) in commissionRankinglist">
						<view class="item" :class="{one:index==0,two:index==1,three:index==2}">
							<view class="item-left">
								<view class="no-one" v-if="index == 0"></view>
								<view class="no-two" v-else-if="index == 1"></view>
								<view class="no-three" v-else-if="index == 2"></view>
								<view class="other" v-else>{{ index }}</view>
								<view class="user">
									<view class="avatar">
										<u-avatar :src="item.avatar"
											size="45"></u-avatar>
									</view>
									<view class="name">
										{{item.phone}}
									</view>
								</view>
							</view>
							<view class="item-right">
								¥{{item.dis_commission}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { gardMobile } from '@/utils/index.js'
	export default {
		data() {
			return {
				commissionRankinglist: [],
				avatar:'',
				settingData:{}
			}
		},
		onLoad() {
			this.getCommissionRanking()
			this.settingData = uni.getStorageSync('settingData')
			if(this.settingData){
				this.avatar = this.settingData.image
			}
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success: () => this.refresh(),
				complete: () => uni.stopPullDownRefresh()
			})
		},
		methods: {
			getCommissionRanking(){
				this.$api.commissionRanking().then(res => {
					console.log(res)
					const arr = res.data.map(item => {
						item.avatar = item.avatar?item.avatar:this.avatar
						return {
							...item,
							phone: gardMobile(item.mobile)
						}
					})
					this.commissionRankinglist = arr
				})
			},
			// 刷新列表
			refresh() {
				this.commissionRankinglist = []
				this.getCommissionRanking()
			},
		}
	}
</script>

<style scoped lang="scss">
	.top {
		padding-top: 20rpx
	}

	.content {
		background: #F5F5F5;
		min-height: 100vh;
		z-index: -1;

		.box {
			padding: 0 30rpx;
		}
	}

	.rankinglist {
		padding: 16rpx 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		height: 100vh;

		.ranking-item {
			padding-top: 20rpx;

			.item {
				display: flex;
				justify-content: space-between;
				padding: 26rpx 26rpx 22rpx 24rpx;

				.item-left {
					display: flex;

					.no-one,
					.no-two,
					.no-three {
						width: 72rpx;
						height: 93rpx;
					}

					.no-one {
						background: url('@/static/img/no_one.png');
						background-size: 100% 100%;
					}

					.no-two {
						background: url('@/static/img/no_two.png');
						background-size: 100% 100%;
					}

					.no-three {
						background: url('@/static/img/no_three.png');
						background-size: 100% 100%;
					}

					.other {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #111111;
						line-height: 76rpx;
						text-align: left;
						font-style: normal;
					}

					.user {
						display: flex;
						padding-left: 30rpx;
						line-height: 76rpx;

						.avatar {}

						.name {
							padding-left: 20rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 36rpx;
							color: #111111;
							text-align: left;
							font-style: normal;
						}
					}
				}

				.item-right {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: #D06122;
					line-height: 90rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.one {
				background: linear-gradient(270deg, #FFFBF7 0%, #FFF5EB 100%);
				border-radius: 10rpx;
			}

			.two {
				background: linear-gradient(90deg, #FFEBF1 0%, #FFFBFC 100%);
				border-radius: 10rpx;
			}

			.three {
				background: linear-gradient(270deg, #F9FCFF 0%, #EAF5FD 100%);
				border-radius: 10rpx;
			}
		}
	}
</style>